<template>
	<div>
		<el-container>
			<el-header :class="!isCollapse ? 'container_header' : 'container_header1'">
				<div class="headstyle" :style="{ backgroundColor: themeColor.bagColor, color: themeColor.fontColor }">
					<div>
						<div class="title_iocn">
							<el-dropdown trigger="click" placement="bottom-start" @visible-change="dropClick" @command="clearHistory">
								<span class="el-dropdown-link">
									<i
											class="el-icon-time"
											style="font-size: 20px; color: #f75e5e; font-weight: bolder; margin-top: 15px"
											slot="reference"
									></i>
								</span>
								<el-divider direction="vertical"></el-divider>
								<el-dropdown-menu slot="dropdown" style="padding-bottom: 0">
									<el-dropdown-item v-for="(urlItem, index) in historyUrls" :key="index" :command="urlItem.path">
										{{ urlItem.name }}
									</el-dropdown-item>
									<el-dropdown-item v-if="historyUrls.length == 0">暂无访问记录地址</el-dropdown-item>
									<el-dropdown-item divided command="0" style="text-align: center; color: #66b1ff">
										<i class="el-icon-delete"></i>
										<span>清空</span>
										<!-- <el-button size="small" type="text" icon="el-icon-delete" @click="clearHistory">清空</el-button> -->
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<!-- header右上角 -->
					<div class="imgBox">
						<!-- 全屏按钮 -->
						<full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
						<!-- 主题切换 -->
						<themeSwitch :setTheme="setThemeColor" :themeColor="themeColor" :style="{ color: themeColor.fontColor }" />
						<!-- 用户中心模块 -->
						<!-- <el-tooltip content="用户中心" placement="bottom" effect="dark"> -->
						<div class="compzzz">
							<div class="ava">
								<!-- <img src="@/assets/icon/morentouxiang.svg" width="28" /> -->
								<img :src="imageUrl" class="avatar" />
							</div>
							<p>{{ userName }}</p>
						</div>
						<!-- </el-tooltip>   -->
						<div style="background: #5d90c2; height: 14px; width: 1px; margin: 18px 0"></div>
						<!-- 消息中心布局 -->
						<!--            <div class="icon" slot="reference" @click="noticeToShow">-->
						<!--&lt;!&ndash;                 <el-tooltip content="消息中心" placement="bottom" effect="dark">&ndash;&gt;-->
						<!--                <el-badge is-dot class="item" style="line-height: 25px;">-->
						<!--                  <i class="iconfont icon-tongzhi font-w"></i>-->
						<!--                </el-badge>-->
						<!--&lt;!&ndash;                 </el-tooltip>&ndash;&gt;-->
						<!--              <el-popover ref="messagePop" placement="bottom" width="250" trigger="click" transition="fade-in-linear" v-model="popvisible" @after-enter="hidePop">-->
						<!--                <i class="el-icon-success" style="color: #409EFF;font-size: 18px;"></i>-->
						<!--                <span style="font-size: 14px;">温馨提示</span>-->
						<!--                <p>{{webSocketMsg.messageContext.content}}</p >-->
						<!--              </el-popover>-->
						<!--              </div>-->
						<el-popover
								ref="messagePop"
								placement="bottom-end"
								width="250"
								trigger="manual"
								transition="fade-in-linear"
								v-model="popvisible"
								@after-enter="hidePop"
						>
							<i class="el-icon-success" style="color: #409eff; font-size: 18px"></i>
							<span style="font-size: 14px">温馨提示</span>
							<p>{{ messageData.messageContext.content }}</p>
							<div class="icon" slot="reference" @click="noticeToShow">
								<!-- <el-tooltip content="消息中心" placement="bottom" effect="dark"> -->
								<el-badge is-dot class="item" style="line-height: 25px">
									<!-- <i class="iconfont icon-tongzhi font-w"></i> -->
									<img :src="require('../../assets/img/chat.png')" style="width: 20px; padding-top: 3px" />
								</el-badge>
								<!-- </el-tooltip>   -->
							</div>
						</el-popover>

						<div style="background: #5d90c2; height: 14px; width: 1px; margin: 18px 0"></div>
						<div style="width: 50px" v-if="menuFlag"></div>
						<!-- 个人中心布局 -->
						<div @click.stop="setDrawerF" class="icon" :style="{ color: themeColor.fontColor }">
							<el-tooltip content="个人中心" placement="bottom" effect="light">
								<i class="iconfont icon-shezhi font-w"></i>
							</el-tooltip>
						</div>
					</div>
				</div>
			</el-header>
			<div :class="!isCollapse ? 'tag-nav-wrapper' : 'tag-nav-wrapper1'">
				<!-- <tags-nav :value="$route" :list="path" @input="tagClick" @on-close="removeTag" :style="{backgroundColor:themeColor.bagColor}" :enter="enterFc" :out="outFc" :closeHandler="closeBtnHandler" /> -->
				<tags-nav-chrome @input="tagClick" @on-close="removeTag" :tabValue="tabValue" />
			</div>

			<!-- 侧边栏+main内容 -->
			<el-container class="container_box">
				<!-- 左侧响应式菜单 -->
				<sidebarMenu
						:menuData="menuData"
						id="box"
						ref="box"
						:routeChange="routeChange"
						:handleClose="handleClose"
						:collapseState="isCollapse"
						:tabStyle="tabStyle"
						:handleCollapse="collapse"
				/>
				<el-main>
					<keep-alive>
						<router-view />
					</keep-alive>
					<!-- <router-view v-if="!keepAlive" :key="activeDate"/> -->
				</el-main>
			</el-container>
		</el-container>
		<el-dialog
				:visible="noShow"
				width="30%"
				title="提示"
				:close-on-click-modal="false"
				:close-on-press-escape="false"
				:show-close="false"
		>
			<span>该系统尚未授权，请联系管理员授权登录!</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="toIndex">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 设置页面 -->
		<settings :Drawer="setDrawer" :stateInit="setDrawerF" :accountChange="accountChange" @updateAvatar="updateAvatar" />
		<component :is="currentMode" :isShow="isShow" :shipid="shipid" @visibleChange="visibleChange"></component>

		<notification :webSocketMsg="webSocketMsg.messageContext" />
		<keep-alive>
			<notice v-if="noticeShow" :maskShowClick="maskShowClick" :userList="userList"></notice>
		</keep-alive>
		<el-dialog
				width="0"
				center
				:visible="updataShow"
				:close-on-click-modal="false"
				:close-on-press-escape="false"
				:show-close="false"
				custom-class="upD"
		>
			<updataCard :close="uClose" class="upDW" :upDataList="upDataList"></updataCard>
		</el-dialog>
		<menuUi @openMsg="openMsg" @getFlag="getFlag"></menuUi>
		<div class="special">
			<!-- 详情弹窗 -->
			<el-drawer :visible.sync="isShowQuery" size="90%" :destroy-on-close="true" :with-header="false" :modal="false">
				<div class="hideBg" @click="isShowQuery = false"></div>
				<div class="drawerContent" v-if="isShowQuery">
					<likeQuery :shipForm="shipForm" :close="closeHandleClick"></likeQuery>
				</div>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	import Utils from "@/libs/Utils.js"
	import TagsNav from "../../components/tags-nav/tags-nav"
	import TagsNavChrome from "../../components/tags-nav/tags-nav-chrome"

	import settings from "./components/settings.vue"
	import themeSwitch from "./components/theme-switch.vue"
	import sidebarMenu from "./components/sidebarMenu.vue"
	import notification from "./components/notification.vue"
	import HomeShip from "./components/HomeShip"
	import likeQuery from "./subPage/likeQuery.vue"
	import HomeInfo from "./components/HomeInfo"
	import HomeSafe from "./components/HomeSafe"
	import fullScreen from "./components/fullscreen.vue"
	import notice from "./components/notice.vue"
	import updataCard from "./components/updataCard.vue"
	import menuUi from "./components/menu.vue"
	import { wsUrl } from "@/network/http"
  import publicapi from "@/api/public";

	export default {
		components: {
			menuUi,
			TagsNav,
			TagsNavChrome,
			settings,
			sidebarMenu,
			HomeShip,
			HomeInfo,
			HomeSafe,
			fullScreen,
			themeSwitch,
			notification,
			notice,
			updataCard,
			likeQuery,
		},
		directives: {
			dragging(el) {
				let current = el //当前元素
				let targetDiv = document.getElementById("map-footer-table")
				current.onmousedown = function (e) {
					//鼠标按下
					document.onmousemove = function (e) {
						let th = document.body.clientHeight - e.clientY - 55
						if (th < 100) {
							th = 100
						}
						targetDiv.style.height = th + "px"
					}
					document.onmouseup = function (e) {
						document.onmousemove = null
						document.onmouseup = null
					}
					return false
				}
			},
		},
		data() {
			return {
				tabValue: {},
				userList: [], //用户列表信息
				menuFlag: false,
				updataShow: false,
				upDataList: [], //更新信息
				historyUrls: [],
				routerLive: true, //路由是否显示
				noticeShow: false,
				activeDate: "", //根据时间戳进行刷新页面
				currentPagePath: "",
				imageUrl:
						sessionStorage.getItem("avatar") != "null" ? sessionStorage.getItem("avatar") : require("@/assets/icon/morentouxiang.svg"),
				isFullScreen: false,
				visible: false,
				popvisible: false,
				currentMode: "",
				isShow: false,
				isShowQuery: false,
				shipid: "",
				timeout: null,
				colorLineFlag: true,
				curTagsIndex: "-1",
				// modalFlag: false,
				isCollapse: true, // 展开left
				collapsed: false, // 同步切换header和left
				searchName: "", // 搜索功能
				activeIndex: "1",
				tagClo: null,
				// compData: [],
				userName: "",
				token: "",
				leftPath: "", // 判断关联tab
				// 菜单数据
				menuData: [],
				// 面包屑
				workLog:[
					'2312321312321312',
					'2312321312321312',
					'2312321312321312',
				],
				breadList: [
					{
						meta: {
							title: "生产云平台",
						},
						name: "home",
						path: "/home",
					},
				],
				path: [],
				pathItem: {
					name: "",
					path: "/home",
					ifHover: false,
				},
				keepAlive: true,
				showRadius: false,
				colorArray: [
					"#f3a5ee",
					"#3afaaf",
					"#baee1b",
					"#f9d511",
					"green",
					"blue",
					"#3a8bf8",
					"#4cfa07",
					"#89efee",
					"#fad60d",
					"#e9f895",
				],
				tabStyle: "container_header",
				isThirdSystem: false, //是否为第三方子系统
				thirdItem: null,
				noShow: false,
				messageData: { messageContext: { content: "" } },
				searchList: [],
				morePageNum: 1,
				query: "",
				totalPageNum: "",
				shipForm: {},
				tqybArr:{
					text1:"",
					text2:"",
					text3:"",
				},
				swtqbArr:{
					text:"",

				},
				swtqbList:[],
				showMarquee:false,
			}
		},
		computed: {
			webSocketMsg() {
				// this.popvisible = true;
				var massageData = this.$store.state.app.websocketData.messageContext

				if (massageData) {
					// setTimeout(()=>{
					if (this.$store.state.app.websocketData.messageContext && this.$store.state.app.websocketData.messageContext.content) {
						this.messageData = this.$store.state.app.websocketData
						this.popvisible = true
					}
					// },500)
					console.log("massageData", this.$store.state.app.websocketData)
					return this.$store.state.app.websocketData
				} else {
					return { messageContext: { content: "" } }
				}
			},
			setDrawer() {
				return this.$store.state.app.drawerState
			},
			themeColor() {
				return this.$store.state.app.themeColor
			},
		},
		created() {
			// Utils.connectWebSocket(wsUrl)
      this.getCustomer()
		},
		mounted() {
			this.$store.dispatch("getBaseData")
			let platform = navigator.userAgent
			if (platform.indexOf("Electron") == -1) {
				//web端调用提示升级组件
				// this.isTipShowFun()
			}
			//增加全局鼠标按下事件
			// document.addEventListener('mousedown',this.mouseDown)
			document.addEventListener("click", e => {
				if (e.target.className != "modal-body") {
					this.modalFlag = false
				}
			})
			this.getUserList() //获取IM所有用户；
			// 需要优化

			// const h = window.getComputedStyle(this.$refs.box).height
			// var tt = document.body.clientHeight || document.documentElement.clientHeight
			// this.$refs.box.style.height = tt - 50 + 'px' //动态设置HTML元素高度
			// window.document.getElementsByClassName('sideleft').height = tt - 50 + 'px'
			// window.addEventListener(
			//   'resize',
			//   () => {
			//     return (() => {
			//       if (this.$refs.box) {
			//         const h = window.getComputedStyle(this.$refs.box).height
			//         var tt =
			//           document.body.clientHeight ||
			//           document.documentElement.clientHeight
			//         this.$refs.box.style.height = tt - 50 + 'px' //动态设置HTML元素高度
			//         window.document.getElementsByClassName('sideleft').height =
			//           tt - 50 + 'px'
			//       }
			//     })()
			//   },
			//   false
			// )
			this.userName = window.sessionStorage.getItem("userName")
			this.token = window.sessionStorage.getItem("token")
			let code = window.sessionStorage.getItem("code")
			// this.getCompData()
			this.getMenuData()
			if (!this.token || code === "0001" || code === "0001") {
				this.$router.push("/login")
			}
			// alert(sessionStorage.getItem("TagList"));
			var tagList = JSON.parse(window.sessionStorage.getItem("TagList"))
			this.path = tagList ? tagList : []
			// var _this = this;
			// this.path.map((item, index) => {
			//   if (item.ifHover) {
			//     _this.tagClo = index;
			//     _this.currentPagePath = item.path;
			//   }
			//   item.label = item.name;
			//   item.key = item.path.replace("/","");
			// });
			// this.tabValue = this.path[0].path.replace("/","");

			// // this.path = [];
			if (this.path.length == 0) {
				this.addTag({ fullPath: "/home", key: "home", label: "首页", meta: { title: "首页" } }) //初始化导航，默认为首页
			}

			//调用全局查询数据接口
			this.$store.dispatch("getSearchData")
		},
		watch: {
			token: function (newToken, oldToken) {
				if (newToken !== oldToken && !newToken) {
					this.$router.push("/login")
				}
			},
			$route: function (to) {
				console.log(to)

				if (to.fullPath == "/externalLink_linkTrain") {
					//是否要跳转到铁道口
					// this.isThirdSystem = true
					this.setSystem("TDK", to)
				} else if (to.fullPath == "/externalLink_SjAnalysis_sj") {
					//是否要跳转到数据自助分析
					// this.isThirdSystem = true
					this.toSjAnalysis(to)
				} else {
					// 动态添加tag
					this.addTag(to)
					this.getBreadcrumb()
					var keyPath = to.fullPath.replace("/", "")
					this.tabValue = { path: to.fullPath, name: to.meta.title, key: keyPath, label: to.meta.title }
				}
			},
		},
		methods: {
      /**
       * 获取客户信息
       */
      async getCustomer() {
        const res = await publicapi.getlistCustomer()
        window.sessionStorage.setItem("customerData",JSON.stringify(res.data.data))
      },
			/**
			 * @description:
			 * @param {*}
			 * @return {*}
			 */ //文字横向滚动
			scrollText() {
				let speed = 40
				let MyMar = null
				let scroll_div = document.getElementById("scrollD1")
				let scroll_begin = document.getElementById("scrollB1")
				let scroll_end = document.getElementById("scrollE1")
				let scroll_end2 = document.getElementById("scrollE12")
				scroll_end.innerHTML = scroll_begin.innerHTML
				scroll_end2.innerHTML = scroll_begin.innerHTML

				//定义一个方法
				function Marquee() {
					if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
						scroll_div.scrollLeft -= scroll_begin.offsetWidth
					} else {
						scroll_div.scrollLeft++
					}
				}

				MyMar = setInterval(Marquee, speed)
				//鼠标滑入这条公告栏的时候,清除上面的方法,让公告栏暂停
				scroll_div.onmouseover = function () {
					clearInterval(MyMar)
				}
				//鼠标滑出这条公告栏的时候,公告栏继续移动
				scroll_div.onmouseout = function () {
					MyMar = setInterval(Marquee, speed)
				}
			},
			selectBlur() {
				let lengthVal = this.searchList.filter(item => item.id == this.searchName)
				if (lengthVal.length == 0) {
					return
				}
				this.$nextTick(() => {
					this.$refs.model.blur()
					this.$router.push({
						path: "/shipGear",
						query: {
							id: this.searchName,
							shipId: this.shipForm.shipId,
						},
					})
				})

				// this.searchList.map((item)=>{
				//   if (item.id == this.searchName) {
				//     this.shipForm = {
				//       id:this.searchName,
				//       shipId:item.shipId,
				//       voyage:item.voyage
				//     }
				//   }
				// })
				// this.isShowQuery = true
			},
			closeHandleClick() {
				this.isShowQuery = false
			},
			/**
			 * @Author: gonghairun
			 * @description: 选中事件
			 * @param {*} value
			 * @return {*}
			 */
			handleChange(value) {
				this.searchName = value
				this.searchList.map(item => {
					if (item.id == value) {
						this.shipForm = {
							id: value,
							shipId: item.shipId,
							voyage: item.voyage,
						}
					}
				})
				this.$nextTick(() => {
					this.$refs.model.blur()
					this.$router.push({
						path: "/shipGear",
						query: {
							id: value,
							shipId: this.shipForm.shipId,
						},
					})
				})

				// this.searchName = value
				// this.searchList.map((item)=>{
				//   if (item.id == value) {
				//     this.shipForm = {
				//       id:value,
				//       shipId:item.shipId,
				//       voyage:item.voyage
				//     }
				//   }
				// })
				// this.$nextTick(()=>{
				//   this.$refs.model.blur()
				//   this.isShowQuery = true
				// })
			},
			/**
			 * @Author: gonghairun
			 * @description: 加载更多
			 * @param {*}
			 * @return {*}
			 */
			loadMore() {
				this.morePageNum++
				if (this.totalPageNum < this.morePageNum) {
					return
				}
				this.getSearchList(this.query)
			},
			/**
			 * @Author: gonghairun
			 * @description: 获取下拉框数据
			 * @param {*}
			 * @return {*}
			 */
			getSearchList(value) {
				var _this = this
				_this.$http
						.get(
								`/${this.$ServiceName}/api/external/ship/${_this.$version}/list/${value}?startpage=${_this.morePageNum}&pagesize=20`
						)
						.then(res => {
							console.log(res)
							let data = res.data.data.pages
							_this.searchList = _this.searchList.concat(data)
							_this.totalPageNum = res.data.data.totalPageNum
						})
						.catch(error => {})

				// var _this = this;
				//  _this.$http.get(`/psys-search-service/api/external/fulltext/${_this.$version}/search?startpage=${_this.morePageNum}&pagesize=20&text=${value}`).then((res) => {
				//    console.log(res)
				//    let data = res.data.data.pages
				//    _this.searchList = _this.searchList.concat(data)
				//    _this.totalPageNum = res.data.data.totalPageNum
				//   }).catch(error =>{});
			},
			//获取IM用户列表
			getUserList() {
				// const { IMUI } = this.$refs;
				var _this = this
				_this.$http
						.get(`/${this.$ServiceName}/api/external/im/${this.$version}/listuser`)
						.then(res => {
							_this.userList = res.data.data
							_this.userList.map(item => {
								item.unread = 0
							})
							// IMUI.initContacts(this.userList);
						})
						.catch(error => {})
			},
			getFlag(val) {
				this.menuFlag = val
			},
			//打开消息
			openMsg() {
				this.noticeToShow()
			},
			//跳转数据自助分析
			toSjAnalysis(to) {
				let platform = navigator.userAgent
				let token = sessionStorage.getItem("token")
				if (platform.indexOf("Electron") != -1) {
					//客户端正常进行
					// 动态添加tag
					this.addTag(to)
					this.getBreadcrumb()
				} else {
					//web端跳转页面
					window.open("http://153.101.186.206:8082/webroot/decision?token=" + encodeURIComponent(token))
					return
				}
			},
			//关闭更新提示
			uClose(type) {
				this.updataShow = false
				if (type && type == "auto") {
					//自动关闭时不掉接口
					return
				}
				this.$http.post(`/${this.$ServiceName}/api/external/readlog/${this.$version}/insert`).then(res => {})
			},
			//是否弹出更新
			isTipShowFun() {
				this.$http.get(`/${this.$ServiceName}/api/external/readlog/${this.$version}/selectbyaccno`).then(res => {
					console.log(res)
					if (res.data.success) {
						if (!res.data.data) {
							this.getWebMessage()
						}
					}
				})
			},
			//获取web端更新信息
			getWebMessage() {
				let _this = this
				this.$http.get(`/${this.$ServiceName}/api/external/mtips/${this.$version}/getcontent`).then(res => {
					console.log(res)
					if (res.data.success) {
						this.updataShow = true
						if (res.data.data) {
							_this.upDataList = res.data.data.split("///").slice(0, -1)
							console.log(_this.upDataList)
						}
					}
				})
			},
			//鼠标按下事件
			mouseDown(e) {
				console.log(e)
			},
			toIndex() {
				this.noShow = false
				// this.$router.push({name:'home'})
				this.$router.back(-1)
			},
			dropClick(flag) {
				if (flag) {
					var TagLists = this.$store.state.app.historyUrl
					if (TagLists.length < 11) {
						this.historyUrls = TagLists
					} else {
						this.historyUrls = TagLists.slice(0, 10)
					}
				}
			},
			clearHistory(val) {
				if (val == "0") {
					// window.sessionStorage.setItem("TagList","[]");
					this.$store.commit("updateHistory", "0")
					this.historyUrls = []
					// this.path = [];
				} else {
					// alert(val)
					this.$router.push(val)
				}
			},
			//打开消息界面
			noticeToShow() {
				this.noticeShow = true
			},
			//关闭消息界面
			maskShowClick() {
				this.noticeShow = false
				this.$store.commit("sotreLastedMsg", {})
			},
			//设置主题颜色状态
			setThemeColor(item) {
				this.$store.commit("updateTheme", item)
			},
			// 消息中心设置2秒后隐藏
			hidePop() {
				setTimeout(() => {
					this.popvisible = false
				}, 2000)
			},
			refreshCurrentPage() {
				this.popvisible = true
				this.activeDate = new Date().toString()
			},
			//全屏事件监听
			fullscreenChange(isFullScreen) {
				// console.log(isFullScreen);
			},
			updateAvatar() {
				this.imageUrl = sessionStorage.getItem("avatar")
			},
			async shipSearch(queryString, cb) {
				// this.searchName = queryString
				var results = await this.getshipList({
					keyword: queryString,
				})
				clearTimeout(this.timeout)
				this.timeout = setTimeout(() => {
					cb(results)
				}, 300)
			},
			handleSelectShip(item) {
				this.searchName = item.nameCn
				this.shipid = item.id
				this.$nextTick(() => {
					// this.currentMode = 'HomeShip'
					setTimeout(() => {
						this.isShowQuery = true
					}, 500)
					// this.isShow = true
				})
			},
			async getshipList({ keyword = "", id = "" } = {}) {
				const res = await this.$http.get(`/${this.$ServiceName}/api/external/protected/listship?keyword=${keyword}&id=${id}`)
				// if (res.data.code != "0000") {
				//     return this.$message.error(res.data.msg);
				// }
				return res.data.data
			},
			accountChange(command) {
				if (command == "info") {
					this.$nextTick(() => {
						this.currentMode = "HomeInfo"
					})
				}
				if (command == "security") {
					this.$nextTick(() => {
						this.currentMode = "HomeSafe"
						// this.isShow = true
					})
				}
				this.isShow = true
				console.log(command, "command")
			},
			visibleChange() {
				this.isShow = false
			},
			//设置弹框状态
			setDrawerF() {
				// alert(111)
				this.$store.commit("updateDrawerState")
			},
			randomColor() {
				//生成随机颜色
				// alert(Math.random()*10)
				var colorArray = this.$store.state.app.colorArray
				var leg = colorArray.length - 1
				let color = colorArray[Math.floor(Math.random() * leg)]
				return color
				// var color = "hsb(" + Math.random()  + ", 1, 1)";
				// return color
			},

			async getMenuData() {
				let params = {
					flag:'0',
				}
				await this.$http
						.get(`/${this.$ServiceName}/api/external/sysmenu/listmenubyacc`,{params:params})
						.then(res => {
							if (res.data.data) {
								this.menuData = res.data.data
								console.log("---------------------")
								console.log(this.menuData)
								localStorage.setItem("menuArr", JSON.stringify(this.menuData))

								this.setMenueIconColor()
								this.menuData.forEach(n => {
									// n.color = this.randomColor()
									if (n.children){
                    n.children.forEach(s =>{
                      if (s.children) {
                        s.children = s.children.map(cn => {
                          return Object.assign(cn, {
                            active: false,
                          })
                        })
                      }else{
                        n.children = n.children.map(cn => {
                          return Object.assign(cn, {
                            active: false,
                          })
                        })
                      }
                    })
                  }
								})
							}
						})
						.catch(error => {})
			},
			// 设置左侧菜单图标及颜色
			setMenueIconColor() {
				this.menuData.map(res => {
					if (res.menuName == "系统管理") {
						res.icon = "icon-shouyelogo-02"
						res.color = "#9695DF"
					}
					if (res.menuName == "基础数据管理") {
						res.icon = "icon-shouyelogo-03"
						res.color = "#3776F3"
					}
					if (res.menuName == "商务业务管理1") {
						res.icon = "icon-shouyelogo-04"
						res.color = "#CFBB86"
					}
					if (res.menuName == "商务业务管理") {
						res.icon = "icon-shouyelogo-05"
						res.color = "#509D92"
					}
					if (res.menuName == "调度指挥管理") {
						res.icon = "icon-shouyelogo-06"
						res.color = "#9695DF"
					}

					if (res.menuName == "生产作业管理") {
						res.icon = "icon-shouyelogo-07"
						res.color = "#FF7E4B"
					}
					if (res.menuName == "计费结算管理") {
						res.icon = "icon-shouyelogo-08"
						res.color = "#CFBB86"
					}
					if (res.menuName == "轮驳生产系统") {
						res.icon = "icon-shouyelogo-09"
						res.color = "#3776F3"
					}
					if (res.menuName == "综合信息查询") {
						res.icon = "icon-shouyelogo-10"
						res.color = "#9695DF"
					}
					if (res.menuName == "数据自助分析") {
						res.icon = "icon-shouyelogo-19"
						res.color = "#9695DF"
					}
					if (res.menuName == "专项统计分析") {
						res.icon = "icon-shouyelogo-11"
						res.color = "#CFBB86"
					}

					if (res.menuName == "决策层驾驶舱") {
						res.icon = "icon-shouyelogo-12"
						res.color = "#6B95EA"
					}
					if (res.menuName == "经营层驾驶舱") {
						res.icon = "icon-shouyelogo-13"
						res.color = "#9695DF"
					}
					if (res.menuName == "执行层驾驶舱") {
						res.icon = "icon-shouyelogo-14"
						res.color = "#CFBB86"
					}
					if (res.menuName == "第三方子系统") {
						res.icon = "icon-shouyelogo-15"
						res.color = "#3776F3"
					}
					if (res.menuName == "系统综合管理") {
						res.icon = "icon-shouyelogo-16"
						res.color = "#CFBB86"
					}
					if (res.menuName == "设备数据管理") {
						res.icon = "icon-shouyelogo-17"
						res.color = "#6B95EA"
					}
					if (res.menuName == "对外服务系统") {
						res.icon = "icon-shouyelogo-18"
						res.color = "#509D92 "
					}
				})
			},
			//折叠导航栏
			collapse() {
				this.isCollapse = !this.isCollapse
				this.tabStyle = this.isCollapse ? "container_header" : "container_header1"
				this.$nextTick(() => {
					var myEvent = new Event("resize")
					window.dispatchEvent(myEvent)
				})
			},

			handleClose(key, keyPath) {
				this.path.slice(key)
			},
			// 动态路由
			getBreadcrumb() {
				var _this = this
				_this.breadList = []
				var breadListTemp = []
				var initRoute = {
					meta: {
						title: "生产云平台",
					},
					name: "home",
					path: "/home",
				}
				breadListTemp.push(initRoute)

				var routeList = this.$route.matched
				routeList.map(function (item, index) {
					if (item.name && item.meta.title != "首页") {
						breadListTemp.push(item)
					}
				})

				// let matched = this.$route.matched.filter(item => item.meta.title)

				_this.breadList = breadListTemp
				console.log(111, this.breadList)
			},
			//点击tag进行事件触发
			tagClick({ item, ifHover, index }) {
				this.$store.commit("updateSearchResource", "tag")
				this.keepAlive = true
				ifHover = true
				// debugger
				this.$router.push(item)
				// this.menuData.forEach(n => {
				//   n.children.forEach(m => {
				//     if (item.indexOf(m.url) != -1) {
				//       m.ifHover = true
				//     } else {
				//       m.ifHover = false
				//     }
				//   })
				// })
				this.currentPagePath = item
				this.tagClo = index
				this.leftPath = null
			},
			// 删除tag按钮事件触发
			closeBtnHandler(type) {
				this.keepAlive = true
				var currentIndex = this.tagClo
				if (type == "closeLeft") {
					currentIndex--
					if (currentIndex > -1) {
						this.path.splice(
								this.path.findIndex((item, index) => index === currentIndex),
								1
						)
						this.tagClo = currentIndex
					}
				} else if (type == "closeRight") {
					currentIndex++
					if (currentIndex < this.path.length) {
						this.path.splice(
								this.path.findIndex((item, index) => index === currentIndex),
								1
						)
						// this.tagClo = currentIndex;
					}
				} else if (type == "closeOther") {
					var item = this.path[currentIndex]
					console.log(item)
					var pathTemp = []
					pathTemp.push(item)
					this.path = pathTemp
				} else {
					this.path = []
					// this.path.push(this.pathItem);
					this.currentPagePath = "/home"
					this.$router.push("/homePage")
				}
				this.$store.commit("updateTagList", this.path)
			},
			//删除导航条tag
			removeTag(list) {
				// console.log(list)
				this.$store.commit("updateSearchResource", "tag")
				let tag = list.index
				let data = list.data
				this.path.splice(tag, 1)
				let lastRouter = this.path.slice(-1)
				if (lastRouter.length > 0) {
					let item = lastRouter[0].path
					this.$router.push(item)
					// this.menuData.forEach(n => {
					//   n.children.forEach(m => {
					//     if (item.indexOf(m.url) != -1) {
					//       m.ifHover = true
					//     } else {
					//       m.ifHover = false
					//     }
					//   })
					// })
				} else {
					//当tag没有，设置回到主页面
					this.$router.push("/homePage")
				}
			},

			//设置系统
			setSystem(system, to) {
				if (system == "TDK") {
					let platform = navigator.userAgent
					this.$http
							.get("/${this.$ServiceName}/api/external/authorization/v1/selectstatusbyid", { params: { systemCode: "TDK" } })
							.then(res => {
								if (res.data.success) {
									if (res.data.data.is_authorize == "1") {
										this.noShow = true
										// this.$message.error('该系统未授权，请授权登录！')
										return
									} else {
										if (platform.indexOf("Electron") != -1) {
											//客户端正常进行
											this.addTag(to)
											this.getBreadcrumb()
										} else {
											//web端跳转页面
											window.open(
													"http://192.168.75.168:999/iotfc/authorize?authToken=" + res.data.data.token.replace(/\+/g, "%2B")
											)
											return
										}
									}
								} else {
									this.noShow = true
								}
							})
				}
			},
			//点击二级菜单触发的函数
			routeChange(item) {
				this.keepAlive = false
				this.tagClo = null
				this.leftPath = item.url
				// this.tabValue = {label:item.menuName,key:item.url.replace("/","")};
				// alert(this.tabValue)
				this.pathItem["name"] = item.menuName
				let conut = 0
				this.menuData.forEach(n => {
					if (n.children) {
						n.children.forEach(m => {
							if (item.url.indexOf(m.url) != -1) {
								conut++
								if (conut === 1) {
									m.ifHover = true
									Object.assign(m, {
										active: false,
									})
								} else {
									return
								}
							} else {
								m.ifHover = false
							}
						})
					}
				})
				item.active = true
				this.$store.commit("updateSearchResource", "menu")
			},
			// 动态添加tag的函数
			addTag(to) {
				if (to.name == "empty") return
				this.$store.commit("updateCurrentPath", to.fullPath)
				// 只有pathItem中的name不为空的时候,才可以进行下列操作
				console.log("namename", this.pathItem["name"], to)
				if (this.pathItem["name"] || to.meta.title) {
					// 为pathItem项目中的path属性进行赋值
					this.pathItem["path"] = to.fullPath
					this.pathItem["name"] = to.meta.title
					// alert(this.pathItem.name)
					this.currentPagePath = to.fullPath
					this.path.push(this.pathItem)
					this.$store.commit("updateHistory", this.pathItem)
					// 此处为存放tag数据进行去重
					var hash = {}
					this.path = this.path.reduce(function (arr, current) {
						hash[current.path] ? "" : (hash[current.path] = true && arr.push(current))
						return arr
					}, [])
					// console.log(this.path);
					// 添加完成之后,重新对pathItem进行赋值
					// this.pathItem = {
					//   name: '首页',
					//   path: '/home'
					// }
					this.pathItem = {}
				}
				//设置tabcol
				this.path.map((pathItem, index) => {
					if (pathItem.path == to.fullPath) {
						this.tagClo = index
						pathItem.ifHover = true
					}
					// if(pathItem.name == '首页')
					// {
					//   pathItem.class = "homeTab";
					// }
					pathItem.label = pathItem.name
					pathItem.key = pathItem.path.replace("/", "")
				})
				// console.log("path--->", this.path)
				// this.$store.commit('updateTagList', this.path);
			},
			//鼠标移入后显示
			enterFc(hoverIndex) {
				// alert(111)
				var paths = JSON.parse(JSON.stringify(this.path))
				paths.map(function (item, index) {
					if (hoverIndex === index) {
						item.ifHover = true
					} else {
						item.ifHover = false
					}
				})
				this.path = paths
			},
			outFc(hoverIndex) {
				var paths = JSON.parse(JSON.stringify(this.path))
				paths.map(function (item, index) {
					if (hoverIndex === index) {
						item.ifHover = false
					}
				})
				this.path = paths
			},
		},
	}
</script>

<style lang="less" scoped>
	.special {
		/deep/.el-drawer__wrapper {
			height: ~"calc(100% - 80px)";
			bottom: 0;
			top: 80px;
		}
		/deep/.hideBg {
			position: fixed;
			left: 0;
			width: 100%;
			z-index: 10;
			height: ~"calc(100% - 80px)";
			bottom: 0;
			top: 80px;
			background-color: rgba(0, 0, 0, 0.5);
			opacity: 0.5;
			transition: opacity 0.5s;
		}
	}
	.drawerContent {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 20;
	}
	// /deep/ .upD {
	//   /deep/ .el-dialog__header{
	//   display: none;
	// }

	// }
	//   /deep/.el-dialog--center .el-dialog__body{
	//   padding: 0;
	// }
	.upDW {
		transform: translateX(-190px);
	}
	/deep/.el-dropdown-menu {
		padding: 0;
	}
	/deep/.el-badge__content.is-dot {
		height: 5px;
		width: 5px;
		top: 7px;
	}
	.el-breadcrumb {
		font-size: 14px !important;
	}
	.ivu-breadcrumb {
		color: #999 !important;
		font-size: 14px !important;
	}
	.main-breadcrumb {
		padding: 8px 15px 0;
	}
	.header-middle-con {
		position: absolute;
		left: 60px;
		top: 0;
		right: 340px;
		bottom: 0;
		padding: 10px;
		overflow: hidden;
	}
	.is-active {
		color: #fab846;
	}
	.no-active {
		color: #a5b2d1;
	}

	.colorLine {
		border-width: 1px;
		border-style: solid;
	}

	.active_i {
		background: #ddd;
		color: #fff !important;
	}

	.container_box {
		height: calc(100vh - 80px) !important;
	}
	.container_header {
		width: calc(100vw - 208px) !important;
		margin-left: 198px;
	}
	.container_header1 {
		width: calc(100vw - 60px) !important;
		margin-left: 50px;
	}
	.iconfont {
		padding: 0;
	}

	.font-w {
		color: #666;
	}

	.font-g {
		color: #d1d5de;
	}

	.font-b {
		color: #b4d4f5;
	}

	.cuttingLine {
		position: absolute;
		height: 100vh;
		width: 1px;
		background-color: #000;
		left: 55px;
	}

	/deep/ .el-submenu__title {
		padding-left: 0px !important;
	}

	/deep/ .el-menu-item {
		padding-left: 0px !important;
	}
	.el-header {
		height: 50px !important;
		padding: 0;
		z-index: 12;
		width: auto;
	}

	.tag-nav-wrapper {
		padding: 0;
		height: 40px;
		background: #f0f0f0;
		padding-left: 208px;
	}
	.tag-nav-wrapper1 {
		padding: 0;
		height: 45px;
		background: #f0f0f0;
		padding-left: 60px;
	}
	.vue-tabs-chrome {
		padding-top: 5px;
		background-color: #d3dff4;
		font-size: 14px;
	}

	.el-main {
		background: #f5f7f9;
		padding-top: 10px;
		position: relative;
		overflow: hidden;
	}

	// headstyle
	.headstyle {
		display: flex;
		justify-content: space-between;
		height: 50px;
		line-height: 50px;
		width: 100% !important;
		background: #d3dff4;
		//box-shadow: 0 1px 4px rgba(0,21,41,.08);
		//transition: all .2s ease-in-out;
		padding: 0 20px 0 10px;
		box-sizing: border-box;
		float: right;
		position: relative;
		right: -10px;

		.title_iocn {
			cursor: pointer;
			float: left;
			/*margin-right: 20px;*/
			margin-left: 10px;

			i {
				color: #666;
			}

			.line {
				border: 1px solid #c9dbf0;
				height: 14px;
				margin: 0 13px;
			}

			.title {
				font-size: 16px;
				font-weight: bold;
				color: #666;
				letter-spacing: -0.5px;
			}
		}
	}

	.el-header {
		.compzzz {
			display: flex;
			width: 115px;
		}

		.icon {
			color: #666;
			padding: 0 11px;
			height: 50px;
			line-height: 50px;
			border-radius: 2px;
		}

		.icon:hover,
		.compzzz:hover {
			background-color: #ecf5ff;
		}

		p {
			font-size: 12px;
		}

		// header 头像
		/deep/ .el-breadcrumb {
			font-size: 12px;
		}

		.imgBox {
			display: flex;
			justify-content: space-between;
			color: #303133;
			// width: calc(100% - 250px);

			/deep/ .el-breadcrumb__inner {
				color: #303133;
				line-height: 50px;
			}
			/deep/ .is-link {
				font-weight: 400 !important;
				font-size: 14px;
			}

			.ava {
				padding: 10px;
				cursor: pointer;

				img {
					height: 28px;
					width: 28px;
					line-height: 28px;
					border-radius: 50%;
					display: inline-block;
					box-sizing: border-box;
					text-align: center;
					color: #fff;
					overflow: hidden;
				}
			}
		}
		// 搜索框
		.searchBox {
			margin-right: 20px;
			/deep/ .el-input__inner {
				border-radius: 50px;
				border-color: #bec6d3;
				background: #fff;
				color: #909399;
				transition: all 0.5s ease 0s;
			}

			// /deep/ .el-input__inner:focus {
			//   width: 300px;
			// }

			/deep/ .seachShipList {
				width: 300px !important;
			}

			/deep/ .el-input__prefix {
				left: 10px;
				color: #96a3b7;
			}
		}
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
	.scroll-div {
		overflow: hidden;
		white-space: nowrap;
		width: 380px;
		background-color: inherit;
		border: 1px solid #e1e4eb;
		border-bottom: none;
		box-sizing: border-box;
		height: 50px;
		color: #333;
	}

	.scroll-begin{
		display: inline-block;
		.scroll-text{
			font-size: 14px;
			/*color: #2F9AF1;*/
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	.scroll-end {
		display: inline-block;
		font-size: 14px;
		/*color: #2F9AF1;*/

	}
	.right1{
		left: 350px;
	}
	.right{
		left: 200px;
	}
	.width1{
		width:calc(50vw - 240px);
	}
	.width2{
		width:calc(45vw - 300px);
	}
</style>
<style lang="less">
	/*.marqueeBox{*/

	.el-popover {
		background: rgba(255,255,255,0.9)!important;
		border-radius: 10px;

	}
	/*}*/
</style>
